<template>
<div>
  <ul class="infinite-list"  style="overflow:auto">
    <li v-for="(item,index) in words" :key="index" class="infinite-list-item">
      <span style="font-size:20px;color:#2b73af;">{{item.word}}</span>
      <span style="font-size:15px;margin-left: 20px" v-show="item.isShow">{{item.translation}}</span><br>
      <el-tooltip  effect="light" content="发音" placement="bottom-end">
      <el-button class="smallBtn" size="mini" @click="$refs.audio[index].play()"><span>📣</span></el-button>
      </el-tooltip>
      <audio ref="audio"  v-show="false" :src="item.speakUrl"></audio>
      <el-tooltip  effect="light" :content="!item.isShow?'查看翻译':'隐藏翻译'" placement="bottom-end">
        <el-button class="smallBtn" size="mini" ><span @click="show(item)">📖</span></el-button>
      </el-tooltip>
      <el-tooltip  effect="light" content="删除" placement="bottom-end">
        <el-button class="smallBtn" size="mini" @click="deleteByWord(item.word)"><span>🗑️</span></el-button>
      </el-tooltip>
      <p style="font-size:10px;color:#2b73af;" v-show="item.isShow">{{item.explains}}</p>
      <el-divider></el-divider>
    </li>
  </ul>
</div>
</template>

<script>
import {mapGetters} from "vuex";
import {deleteByWord, getCollections} from "../../api/user";

export default {
  name: "CollectItem",
  data () {
    return {
      words:[]
    }
  },
  computed:{
    ...mapGetters(['user'])
  },
  mounted() {
    this.get()
    this.$bus.$on('newCollect',()=>{
      this.get()
    })
  },
  methods: {
    get(){
      getCollections(this.user.id).then((res)=>{
        this.words=res.data
        for (let i = 0; i < this.words.length; i++) {
          this.$set(this.words[i],'isShow',false)
        }
      })
    },
    show(item){
      item.isShow = !item.isShow
    },
    deleteByWord(word){
      console.log(word)
      deleteByWord(word).then((res)=>{
        this.get()
        this.$message.success(res.message)
      })
    }
  }
}
</script>

<style scoped>
.infinite-list{
  max-height: 500px;
}
*{
  font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.infinite-list-item{
  /*text-align: center;*/
}
.smallBtn{
  margin-left: 5px;
  width:10px;
  height:25px;
}
.smallBtn span{
  margin-left: -8px;
}
</style>